<template>
  <!-- 搜索历史 -->
  <div>
    <!-- 标题区域 -->
    <van-cell title="搜索历史">
      <!-- 动态显示右侧图标和文字显现 -->
      <div v-if="isDelete">
        <span @click="delAll">全部删除</span>
        &nbsp;&nbsp;
        <span @click="isDelete = false">完成</span>
      </div>
      <van-icon name="delete-o" v-else @click="isDelete = true" />
    </van-cell>
    <!-- 历史区域 -->
    <van-cell
      v-for="(key, index) in keyList"
      :key="index"
      :title="key"
      @click="toResult(key)"
    >
      <!-- 动态显示右侧图标和文字显现 -->
      <van-icon name="close" @click.stop="del(key)" v-if="isDelete" />
    </van-cell>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      isDelete: false
    }
  },
  methods: {
    delAll() {
      this.$store.commit('DEL_KEY_LIST')
    },
    del(key) {
      const index = this.keyList.findIndex((item) => item === key)
      console.log(index)
      // this.keyList.splice(index, 1)

      this.$store.commit('DEL_INDEX', index)
    },
    toResult(key) {
      // console.log(this.$parent)
      // console.log(key)
      this.$parent.keywords = key
      this.$emit('search', key)
    }
  },
  computed: {
    ...mapState(['keyList'])
  }
}
</script>

<style></style>
